<template>
  <a-modal
    title="申请保函"
    :width="800"
    :height="300"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :footer="null"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <div v-if="chooseOrg" align="center">
        <a-form :form="form">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="选择投保单位" hasFeedback>
            <a-select v-decorator="['status', { rules: [{ required: true, message: '请选择一个投保单位' }] }]">
              <a-select-option :value="1">东海市投融资担保有限公司</a-select-option>
              <a-select-option :value="2">东海市建设担保有限公司</a-select-option>
              <a-select-option :value="3">望东省投融资担保有限公司</a-select-option>
            </a-select>
          </a-form-item>
        </a-form>
        <div style="margin-bottom: 20px">
          <h2 style="color: #1890ff">网络协议</h2>
          <div v-html="wlxy" style="text-align: left; height: 400px; margin: 20px; overflow: auto; padding: 20px"></div>
        </div>
        <div style="text-align:right;margin-right:40px;margin-bottom:30px">
          <a-checkbox @change="onChange"> 我已阅读并同意以上条款 </a-checkbox>
        </div>
        <a-button @click="handleOk" type="primary">确定</a-button>
      </div>

      <div v-if="jiaofei">
        <p>正在跳转缴费界面。。。</p>
        <a-button @click="jiaofeiStatus" type="primary">缴费完成未刷新? 点击这里...</a-button>
      </div>

      <div v-if="shenhe">订单审核中......</div>
      <div v-if="download">订单审核完成，点此<a @click="downloadpact()">下载保函</a></div>
    </a-spin>
  </a-modal>
</template>

<script>
import { getPermissions } from '@/api/manage'
import { actionToObject } from '@/utils/permissions'
import pick from 'lodash.pick'
import { downloadFile } from '@/api/manage'

export default {
  name: 'RoleModal',
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      visible: false,
      confirmLoading: false,
      chooseOrg: true,
      jiaofei: false,
      shenhe: false,
      download: false,
      mdl: {},
      url: {
        downloadurl: '/finanTenderInfo/download',
      },
      form: this.$form.createForm(this),
      permissions: [],
      wlxy:
        '<h4>一、开放平台隐私政策</h4><p>长安国际信托开放服务平台网站隐私权保护声明系本网站保护用户隐私的承诺。长安国际信托开放服务平台将用户隐私保护作为本平台的一项基本政策，随着开放服务平台的变动或扩展，隐私声明的内容可由开放平台随时更新，更新后的隐私声明一旦在网页上公布即有效代替原来的隐私声明，请您务必仔细阅读。</p><p>1.&nbsp;关于个人信息</p><p>开放平台严格保护申请人信息的安全，我们使用安全技术和程序来保护您的个人信息不被未经授权的访问、使用或泄漏。开放平台不会将合作方提供的资料利用于合作协议之外的其它目的。但当执法机关依照法定程序要求本网站披露个人资料时，本网站将根据执法单位的要求或出于公共安全目的向执法当局提供个人资料。在此情况下之任何披露，本网站均不承担任何责任。</p><p>2.关于非个人信息</p><p>开发平台会通过的IP地址来收集申请人的非个人化信息，例如浏览器性质、操作系统种类、提供接入服务的IP的域名等，非个人化信息仅会用于优化开发平台网站的管理和服务，不会用于除提供或提升平台服务以外的其他目的。</p><p>3.关于安全措施：</p><p>开发平台将会采用加密、授权等多种安全方式对申请人所提供的资料进行严格的管理及保护，并定期升级开发平台的安全策略和安全技术，防止申请人的申请资料丢失、被盗用或遭篡改。</p><h4>二、开放平台安全守则</h4><p>为了落实《中华人民共和国网络安全法》、《中华人民共和国数据安全法》等相关法律，遵守《金融科技创新安全通用规范》、《数据安全分级指南》、《个人金融信息保护技术规范》等行业法规，参照公司《长安国际信托股份有限公司信息安全管理办法》的制度要求，维护安全健壮的网络业务环境，实现合作共赢，请您及所代表的机构仔细阅读并遵守以下条款。</p><p>1.合作方申请平台服务时，需确保提交真实、有效的申请资料。</p><p>2.合作需严格遵守合作协议，未经开发平台方允许，不得向合作协议外的第三方提供所获取的平台服务。</p><p>3.合作方应确保信息安全保密，不允许在公共网络环境暴露长安国际信托开放平台提供的信息，包括但不限于样例数据、测试数据、密钥等平台相关信息。</p><p>4.使用平台网络服务前，合作方应及时整改网络主管部门监测和发现的安全隐患，整改后才可接入平台的接口服务，避免网络安全风险的传播。</p><p>5.当合作方发生信息安全事件时，应立即将相关情况通知平台方，确保合作双方及时采取措施将损害和影响降到最小范围。</p><p>6.因平台数据交互通过公网进行，合作方在使用平台服务时，需加强相关人员的信息安全培训教育，提高使用人员的安全意识和信息安全技术防护能力，避免发生不必要的操作风险。</p><p>7.如合作方因经营异常等特殊情况需终止平台服务，合作方应提前至少7个自然日告知平台方，并商议协商退出事宜。</p><p>8. 平台方保留依照相关法律或双方协议主动终止提供服务的权利。</p><h4>三、开放平台免责声明</h4><p>遇到下列情况时平台无需承担任何责任：</p><p>1.&nbsp;开放平台对由于政府禁令、现行生效的适用法律或法规的变更、火灾、地震、动乱、战争、停电、通讯线路中断、&nbsp;黑客攻击、计算机病毒侵入或发作、电信部门技术调整、因政府管制而造成网站的暂时性关闭等任何影响网络正常运营的不可预见、 不可避免、不可克服和不可控制的事件（“不可抗力事件”），以及他人蓄意破坏、 正常的系统维护、 系统升级， 或者因网络拥塞而导致本网站不能访问而造成的本站所提供的信息及数据的延误、 停滞或错误，合作方由此受到的一切损失不承担任何责任。</p><p>2.&nbsp;因合作方使用失误等原因导致的合作方资料泄露及由此而导致的任何法律争议和后果。</p><p>3.&nbsp;开放平台对由于合作方不正当使用本平台服务、或使用平台信息进行交易引起的对任何第三方的损害不承担任何赔偿责任。</p><p>4.&nbsp;若开放平台已经明示本网站运营方式发生变更并提醒合作方应当注意事项后，合作方未按要求操作所产生的一切后果由合作方自行承担。</p><p>5.&nbsp;合作方将注册账号、密码告知他人或与他人共享注册帐户，由此导致的任何合作方信息的泄漏，或其他非因开放平台原因导致的信息的泄漏，开放平台概不负责。</p><p>6.&nbsp;因本平台提供的服务涉及到互联网服务，可能会受到各个环节不稳定因素的影响。因此服务存在因国家相关行业主管部门及电信运营商的调整、用户关机以及其他任何技术、互联网络、通信线路原因等造成的服务中断或不能满足用户要求的风险。用户须承担以上风险，开放平台不作担保。</p>',
    }
  },
  created() {
    this.loadPermissions()
  },
  methods: {
    onChange(value){
      console.log(value)
    },
    add() {
      this.edit({ id: 0 })
    },
    edit(record) {
      this.mdl = Object.assign({}, record)
      this.visible = true

      console.log('this.mdl', this.mdl)
    },
    close() {
      this.chooseOrg = true
      this.jiaofei = false
      this.shenhe = false
      this.download = false
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      let _this = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        // 验证表单没错误
        if (!err) {
          _this.confirmLoading = true
          let url = window._CONFIG['domianURL'] + `/sys/thirdLogin/render/`
          window.open(
            url,
            `login`,
            'height=500, width=500, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no'
          )
          let that = this
          let receiveMessage = function (event) {
            let token = event.data
            if (token == '已支付') {
              this.jiaofeiStatus()
            }
          }
          this.chooseOrg = false
          this.jiaofei = true
          _this.confirmLoading = false
          window.addEventListener('message', receiveMessage, false)
        }
      })
    },
    handleCancel() {
      this.close()
    },
    jiaofeiStatus() {
      let _this = this
      _this.confirmLoading = true
      this.jiaofei = false
      this.shenhe = true
      new Promise((resolve) => {
        setTimeout(() => resolve(), 2000)
      })
        .then(() => {
          this.shenheStatus()
          // Do something
        })
        .catch(() => {
          // Do something
        })
        .finally(() => {
          _this.confirmLoading = false
          // _this.close()
        })
    },
    shenheStatus() {
      let _this = this
      _this.confirmLoading = true
      new Promise((resolve) => {
        setTimeout(() => resolve(), 2000)
      })
        .then(() => {
          this.shenhe = false
          this.download = true
          // Do something
          _this.$emit('ok')
        })
        .catch(() => {
          // Do something
        })
        .finally(() => {
          _this.confirmLoading = false
          // _this.close()
        })
    },
    onChangeCheck(permission) {
      permission.indeterminate =
        !!permission.selected.length && permission.selected.length < permission.actionsOptions.length
      permission.checkedAll = permission.selected.length === permission.actionsOptions.length
    },
    onChangeCheckAll(e, permission) {
      Object.assign(permission, {
        selected: e.target.checked ? permission.actionsOptions.map((obj) => obj.value) : [],
        indeterminate: false,
        checkedAll: e.target.checked,
      })
    },
    loadPermissions() {
      getPermissions().then((res) => {
        let result = res.result
        this.permissions = result.map((permission) => {
          const options = actionToObject(permission.actionData)
          permission.checkedAll = false
          permission.selected = []
          permission.indeterminate = false
          permission.actionsOptions = options.map((option) => {
            return {
              label: option.describe,
              value: option.action,
            }
          })
          return permission
        })
      })
    },
    downloadpact() {
      this.downloadFile()
    },
    downloadFile() {
      downloadFile(this.url.downloadurl, '投标保函.docx', {})
    },
  },
}
</script>

<style scoped>
</style>